<template>
    <div>
        <div class="find_top">
            <settingheader :titletext="out" :backpage="ao"></settingheader>            
        </div>
        <div class="demo">
            <div class="centre">
                    <h1>最火话题</h1>
                    <p>TOP50</p>
            </div>
            <img src="../../../images/IMG_bianmeixue_02.png" alt="">
        </div>

        <div class="title clearfix">
            <div><img src="../../../images/icon_zuireshangping_red.png" alt=""></div>
            <div><h2>话题排行榜</h2></div>
            <div><img src="../../../images/icon_zuireshangping_red.png" alt=""></div>   
        </div>
        <div class="main">
            <div class="content" v-for='(item,index) in data' :key='index'>
                <div class="img"><img :src="item.img" alt=""></div>
                    <p class="title">{{item.content}}</p>
                    <div class="bottom">
                    <div class="mary clearfix"><img :src="item.icon" alt=""><div class="name">{{item.name}}</div><span class="advices clearfix"><div class="num">{{item.news}}</div><img :src="item.state" alt=""></span></div> 
                </div>
            </div>
        </div>
    </div>
</template> 
<script>
import Settingheader from "../../../components/settingheader"
export default {
  name:'Topics',
  data(){
      return{
        out:"最火话题",
        ao:"/find",
        data:[]
      }
  },
  components:{
      Settingheader
  },
  created(){
      this.$http.get(this.$store.state.host+'/love/topic')
      .then(res=>{
          this.data= res.data
      })
  }
}
</script>
<style lang="less" scoped>
    
.find_top{
  width:100%;
  height:306/75rem;
  background:#ff406f;
  margin-bottom:240/75rem;


}
 .centre{
     position: absolute;
     width: 230/75rem;
     left:0;
     right:0;
     top:0;
     bottom: 0;
     margin: auto auto;
     height: 128/75rem;
     background: #fff;
     text-align: center;

     h1{
         font-size: 30/75rem;
         padding-top: 24/75rem;
         color: #ff406f;
     }
     p{
         font-size: 28/75rem;
         padding-top: 14/75rem;
         color: #ff406f;
     }
     
 }
.demo{
  position:absolute;
  width:714/75rem;
  height:338/75rem;
  // border:solid 1px black; 
  border-radius:16/75rem;
  box-shadow: 0 0 20px #888888;
  background:#fff;
  top:168/75rem;
  left:0;
  right:0;
  margin: 0 auto;
  overflow:hidden;
 img{
     width: 100%;
 }

}

.title{
  width:240/75rem;
  margin:0 auto;


  h2{
  font-size:32/75rem;
  padding:34/75rem 0;
  }

  div{
    float:left;
    padding-right:20px;
  }
}


// .content{
//     width:714/75rem;
//     height:346/75rem;
//     margin: 0 auto;

//     .matter{
//         width:346/75rem;
//         height:346/75rem;
//         box-shadow: 0 0 20px #888888;
//         border-radius:16/75rem;
//         overflow:hidden;
//         img{
//             width:100%;
//             height:268/75rem;
//         }
          
                
//     }

// }




.main{
//   position:absolute;
  
  width:714/75rem;
  // border:solid 1px black; 

//   box-shadow: 5px -5px 50px #888888;
  background:#fff;
  top:168/75rem;
  left:0;
  right:0;
  margin: 0 auto;
  overflow: hidden;
  margin-bottom:38/75rem;
  .content{
      width:346/75rem;
      height:269/75rem;
      float:left;
    margin-bottom: 120/75rem;
    margin-left: 10/75rem;
      .img{
        border-radius:16/75rem;
        overflow:hidden;
        
          
          img{
              width: 346/75rem;
              height: 269/75rem;
              
          }
      }
  }

 
  .title{
      margin-top:8/75rem;
      margin-left:16/75rem;
      font-size:16/75rem;
      overflow:hidden;
      text-overflow:ellipsis;
  }


  .mary{
      width:100%;
      font-size:16/75rem;
      margin-top:12/75rem;      
      margin-left:16/75rem;    
      float:left;  

      img{
          width:30/75rem;
          height:30/75rem;
          border-radius:6/75rem;
          float:left;
      }

      .name{
          float:left;
          margin-top:10/75rem;
          margin-left:4/75rem;
      }
    
    .advices{
      font-size:18/75rem;
      float:right;
      margin-right:24/75rem;
    }
    .num{
      float:right;
      margin-left:4/75rem;
    }
  }

}

.clearfix:after {
  content: " ";
  display: block;
  clear: both;
  height: 0;
}
.clearfix {
  zoom: 1;
}
</style>